<%@page import="service.ClassService"%>
<%@page import="entities.ClassEntity"%>
<%@page import="service.GoodsService"%>
<%@page import="entities.GoodsEntity"%>
<%@page import="service.SellerService"%>
<%@page import="entities.SellerEntity"%>
<%@page import="util.Util"%>
<%@ page language="java" import="java.util.*,java.math.BigDecimal;"
	pageEncoding="UTF-8"%>
<%
	String userName = (String)session.getAttribute("userName");	
	String sellerId = request.getParameter("sellerId");
	String gClassId = request.getParameter("classId");
	String gPrice = request.getParameter("price");
	String gKey = request.getParameter("key");
	if(gClassId==null){
		gClassId="all";
	}
	if(gPrice==null){
		gPrice="all";
	}
	if(gKey==null){
		gKey="all";
	}
	SellerEntity seller = new SellerEntity();
	if (sellerId != null) {
		seller = SellerService
				.getSellerById(Integer.parseInt(sellerId.trim()));
	}
%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>菜单列表</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/GlobalFunction.js" type="text/javascript"></script>

</head>
<style type="text/css">
/*商家信息*/
.sellerInfo {
	width: 960px;
	height: 180px;
	background: #FAFAFA;
	margin: auto;
	height: 120px;
	padding-top: 6px;
	background: #FAFAFA;
}

p.sellerName {
	font-size: 250%;
	margin: 10px;
	color: #6E155F;
}

p.orderPhone {
	font-size: 24px;
	margin-bottom: 20px;
	padding: 2px 0px;
	padding-left: 32px;
	color: Red;
}

.info1 {
	width: 480px;
	float: left;
}

.info1 img {
	box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

.logo {
	float: left;
	margin-right: 15px;
	width: 200px;
	height: 100px;
}

.info2 {
	width: 220px;
	float: left;
	margin-right: 20px;
}

.info2 span {
	font-size: 13px;
	color: #BEBEBE;
}
/*限定图片的宽度*/
img {
	width: 200px;
	height: auto;
	display: block;
	border: 0;
}
/*瀑布流布局样式*/
#lxf-box {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#lxf-box li {
	background: #fff;
	border: solid 1px #ccc;
	text-align: center;
	padding: 10px;
	float: left;
	-webkit-transition: all .7s ease-out .1s;
	transition: all .7s ease-out .1s;
	-moz-transition: all .7s ease-out;
	-o-transition: all .7s ease-out .1s;
	box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

#lxf-box li:hover {
	border: solid 1px red;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5) !important;
}

#lxf-box li:hover .actions {
	display: block;
}

#loading {
	display: none;
	line-height: 30px;
	background: #000;
	color: #fff;
	text-align: center;
	height: 30px;
	width: 100%;
	position: fixed;
	bottom: 0;
	opacity: 0.8;
}

/*操作*/
.actions {
	display: none;
	top: 10px;
	left: 0px;
	z-index: 3;
	width: 100%;
	position: absolute;
}

.actions a {
	text-decoration: none;
	padding: 5px 10px;
	color: #555;
	background-color: #f5f5f5; /*浅灰*/
	border-radius: 3px;
}

.actions  a:hover {
	background-color: #7CDAEF;
	color: red;
}
/*销售量*/
.sale {
	margin-left: 5px;
	color: #bbbbbb;
	font-size: 13px;
}

.saleCount {
	color: red;
	font-size: 13px;
}

/*评分*/
.score {
	margin-left: 35px;
}

.score dl {
	display: inline;
}

.score dt {
	float: left;
	width: 22px;
	text-indent: -9999px;
	padding: 0px;
	background: url('images/star.png') no-repeat;
}

.score dt.on {
	background-position: 0 -28px;
}

.score span {
	float: left;
	margin-left: 3px;
	font-size: 13px;
	color: #0066ff;
}

/*商品搜索*/
.search {
	margin: auto;
	width: 1100px;
	height:20px;
	margin-bottom:5px;
	border-bottom:2px solid #e5e5e5; 
	padding: 12px 0px;
}

/*商品类别*/
.searchType{
	float:left;
	margin-right: 35px;
}
.searchType a {
	color: #666;
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	padding:1px;
	line-height: 20px;
	margin-left: 3px;
}

.searchType a.c,.searchType a:hover {
	background: #ff8dba;
	color: #fff;
	border-radius: 3px;
}

.searchType .split {
	color: #ffe4ef;
	*vertical-align: 3px;
}

/*搜索框*/

a.go {
	height: 20px;
	width: 23px; /*50 povodne*/
	background-color: #7CDAEF;
}

a.go:hover {
	cursor: pointer;
}
</style>
<body>
	<jsp:include page="header.jsp"></jsp:include>
	<div style="height: 36px;" id="userName"><%=userName%></div>
	<div style="display: none;" id="sellerId"><%=sellerId%></div>
	<div style="display: none;" id="gClassId"><%=gClassId%></div>
	<div style="display: none;" id="gPrice"><%=gPrice%></div>
	<div style="display: none;" id="gKey"><%=java.net.URLDecoder.decode(gKey, "UTF-8")%></div>
	<div style="background: #FAFAFA;">

		<div class="sellerInfo">
			<div class="info1">
				<img class="logo" alt="<%=seller.getName()%>"
					title="<%=seller.getName()%>" src="<%=seller.getLogoURL()%>" />
				<p class="sellerName"><%=seller.getName()%></p>
				<p class="orderPhone"><%=seller.getTel()%></p>
			</div>
			<div class="info2">
				<p>
					地址：<span><%=seller.getAddress()%></span><br /> 送餐时间：<span
						style="color:red;font-size: 13px;"><%=seller.getDeliverTime()%></span>
				</p>
			</div>
			<div class="info2">
				<p>
					简介：<span><%=seller.getDesc()%></span>
				</p>
			</div>
		</div>
	</div>
	
	<div class="search">
		<span><a id="hot" href="javascript:void(0);">热门度</a>|<a id="good" href="javascript:void(0);">好评度</a></span>
		<div id="class" class="searchType">类别：   
		   <a id="all" class="c" href="javascript:void(0);">全部</a>
		<% List<ClassEntity> clsList = new ArrayList<ClassEntity>();
		   clsList= ClassService.getAllClass();
		   for(ClassEntity cls:clsList){
		%>
		   <span class="split">|</span><a id="<%=cls.getId() %>" href="javascript:void(0);"><%=cls.getName() %></a>
		<%} %>
		</div>
	  	<div id="price" class="searchType">价格：
	         <a id="all" class="c" href="javascript:void(0);">全部</a><span class="split">|</span>
	         <a id="0-10" href="javascript:void(0);">&lt;=￥10</a><span class="split">|</span>
	         <a id="11-15" href="javascript:void(0);">￥11-15</a><span class="split">|</span>
	         <a id="16-65536" href="javascript:void(0);">￥16及以上</a>
	  	</div>	
	  	<%if(!"all".equals(gKey)){ %>
		  	<div id="keyWord" class="searchType">关键词：<a title="点击删除关键字" href="javascript:void(0);"><%=java.net.URLDecoder.decode(gKey, "UTF-8")%></a>
		  	</div>
	  	<%} %>
	  	<div style="float: right;" class="searchType">搜索：       
	       <input type="text" id="key" value="" />
			<a id="go" class="go">GO</a>
	  	</div>
	</div>
	<ul id="lxf-box">
		<%
			List<GoodsEntity> goodsList=new ArrayList<GoodsEntity>();
			if (sellerId != null) {
				goodsList = GoodsService.getPageGoods(gKey, gClassId, gPrice, sellerId, "0");
				for (GoodsEntity goods:goodsList) {
		%>
		<li><a href="goodsDetail.jsp?goodsId=<%=goods.getId()%>"><img
				src="<%=goods.getImageUrl()%>"> </a>
			<div><%=goods.getName()%><span class="saleCount">￥<%=goods.getPrice()%></span><span class="sale"> 销售量：</span><span
					class="saleCount"><%=goods.getSaleCount()%></span>
			</div>
			<!-- 评分 -->
			<div align="center" class="score">
				<dl>
					<%
						int score =  new BigDecimal(goods.getRank()+"").setScale(0, BigDecimal.ROUND_HALF_UP).intValue();
						for(int i= 1;i<=score;i++){
					%>
					<dt class="on"><%=i%></dt>
					<%
						}
						for(int i= 1;i<=5-score;i++){
					%>
					<dt><%=(5-score)%></dt>
					<%
						}
					%>
				</dl>
				<span><%=goods.getRank()%></span>
			</div> 
			<!-- 购买、收藏、评论 -->
			<div class="actions">
				<a class="buy" id="<%=goods.getId() %>" onclick="readyBuy(<%=goods.getId()%>);" href="javascript:void(0);return false;">加入购物车</a> <a class="collect"
					 onclick="readyCollect(<%=goods.getId()%>);" href="javascript:void(0);">收藏</a> <a class="comment"
					href="goodsDetail.jsp?goodsId=<%=goods.getId()%>#comment_content">评论</a>
			</div>
		</li>

		<%
			}
			}
		%>
	</ul>
	<span style="display: none;" id="goodsCount"><%=goodsList.size()%></span>
	<div id="loading">正在加载……</div>
	<div id="footer" style="display: none;">
		<jsp:include page="footer.jsp"></jsp:include>
	</div>
</body>
<script>
/*
原理：1.把所有的li的高度值放到数组里面
     2.第一行的top都为0
	 3.计算高度值最小的值是哪个li
	 4.把接下来的li放到那个li的下面
<a href="http://iiwnet.com/js_web/">网页特效代码</a>
编写时间：2012年6月9日
*/
function iiwnet(){//定义成函数便于调用
	var wrap = document.getElementById("lxf-box");
	var margin = 10;//这里设置间距
	var li=$("#lxf-box li");//这里是区块名称
	var	li_W = li[0].offsetWidth+margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
	var h=[];//记录区块高度的数组
    li.css("position","absolute");
    var footer_margin=0;
	var n = wrap.offsetWidth/li_W|0;//容器的宽度除以区块宽度就是一行能放几个区块
	for(var i = 0;i < li.length;i++) {//有多少个li就循环多少次
		li_H = li[i].offsetHeight;//获取每个li的高度
		if(i < n) {//n是一行最多的li，所以小于n就是第一行了
			h[i]=li_H;//把每个li放到数组里面
			li.eq(i).css("top",0);//第一行的Li的top值为0
			li.eq(i).css("left",i * li_W);//第i个li的左坐标就是i*li的宽度
			}
		else{
			min_H =Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
			footer_margin=min_H;//设置页脚的位置
			minKey = getarraykey(h, min_H);//最小的值对应的指针
			h[minKey] += li_H+margin ;//加上新高度后更新高度值
			li.eq(i).css("top",min_H+margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
			li.eq(i).css("left",minKey * li_W);	//第i个li的左坐标就是i*li的宽度
		}
		//$("h3").eq(i).text("编号："+i+"，高度："+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
		$("#lxf-box li").animate({opacity:1},2000,showFooter(footer_margin+li_H));//动画加载完后实时判断是否已加载完。如果是，加载页脚
		
	}
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*这里一定要用onload，因为图片不加载完就不知道高度值*/
window.onload = function() {iiwnet();};
/*浏览器窗口改变时也运行函数*/
window.onresize = function() {iiwnet();};

/**********************************************************************/
/*分页加载*/
var i=1;
var page =1;//当用户滚动滑轮到低端时，从第一页数据开始加载，每页最多加载8条数据
var gId =-1;//商品ID
function getMore(id){
	//获得参数
	var gKey = $("#gKey").html();
	var gPrice =$("#gPrice").html();
	var gClassId = $("#gClassId").html();
	var hot = $("#hot").html();
	var good = $("#good").html();
	
	$("#loading").show();
	var url = "servlet/GoodsServlet?key="+gKey+"&price="+gPrice+"&classId="+gClassId+"&sellerId="+id+"&pageIndex=" + page;
	$.getJSON(url, function(data){		
		$.each(data,function(i){
			var image=data[i].imageUrl;//获得商品图片路径
			gId=data[i].id;//获得商品ID
			gName =data[i].name;//获得商品名
			gSale=data[i].saleCount;//获得商品销售量
			gPrice=data[i].price;//获得商品销售量
			gRank =data[i].rank;//获得商品分数
			//打分，星星的亮显个数
			var star = Math.round(gRank);
			var starHtml="";
			for(var count1 =1; count1<=star;count1++){
				starHtml+="<dt class=\"on\">"+count1+"</dt>";
			}
			for(var count2 =1; count2<=5-star;count2++){
				starHtml+="<dt>"+count2+"</dt>";
			}
			
			if(gId!=0){
			 	var html="<li style='opacity:0'>"+
			 	"<a href='goodsDetail.jsp?goodsId="+gId+"'><img src="+image+" ></a>"//图片
			 	+"<div>"+gName+"<span class='saleCount'>￥"+gPrice+"</span><span class=\"sale\">销售量：</span><span class=\"saleCount\">"+gSale+"</span></div>"
				+"<div align=\"center\" class=\"score\"><dl>"+starHtml+"</dl><span>"+gRank.toFixed(1)+"</span></div>"
				+"<!-- 购买、收藏、评论 --><div class=\"actions\"><a class=\"buy\" onclick=\"readyBuy("+gId+");\" id=\""+gId+"\" href=\"javascript:void(0); return false;\">加入购物车</a> <a class=\"collect\" onclick=\"readyCollect("+gId+");\"  href=\"javascript:void(0);\">收藏</a> <a class=\"comment\" href=\"goodsDetail.jsp?goodsId="+gId+"\">评论</a></div>"
				+"</li>";	
				$("#lxf-box").append(html);	
			}
		});
		iiwnet();
		page+=1;//页数加1，
		i=1;
		$("#loading").hide();
	});
};

/*滚动到底部的时候*/
$(window).bind("scroll",function(){
	if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 && i==1) {
		i=0;
		if($("#footer").is(":hidden")){	
			getMore($("#sellerId").html().trim());
		}
	}
 });
 
 //当结束时显示页脚
 /* 由于每加载一个<li>标签都会执行该方法，有必有对页脚footer显示的位置加以计算
 	由于传个来的height参数总是每次加载<li>标签完后最后一个<li>标签的高度，但是
 	这个<li>并不一定就是最靠下面的，特别对于商品数量没有超过一行（4个）的情况。
 	这时候需要
 */
 
//保证最大的高度值
var maxMargin=0;
function showFooter(height){
	//如果当前的高度值超过了最大的高度值，改变最大的高度值
	if(height>maxMargin){
		maxMargin=height;
	}
 	//如果加载完,加载页脚（针对有滚动条的情况，即商品数量>8个的情况）
	if(gId==0){
		$("#footer").css("margin-top",maxMargin);
		$("#footer").show();
	}
	//如果加载完,加载页脚（针对没有滚动条的情况，即商品数量<8个的情况
	if($("#goodsCount").html().trim()<8){
		$("#footer").css("margin-top",maxMargin);
		$("#footer").show();
	}
}
</script>

<script type="text/javascript">
	//获得参数
	var sellerId = $("#sellerId").html();
	var gKey = $("#gKey").html();

	var gPrice =$("#gPrice").html();
	var gClassId = $("#gClassId").html();

	$(document).ready(function(){

		//监听商品类别按钮
		$("#class a").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key="+encodeURI(encodeURI(gKey))+"&price="+gPrice+"&classId="+$(this).attr("id");
			window.location.href=url;
		});
		
		$("#hot").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key="+encodeURI(encodeURI(gKey))+"&price="+gPrice+"&classId=all";
			window.location.href=url;
		});
		
		$("#good").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key="+encodeURI(encodeURI(gKey))+"&price="+gPrice+"&classId=all";
			window.location.href=url;
		});
		//监听价格按钮
		$("#price a").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key="+encodeURI(encodeURI(gKey))+"&price="+$(this).attr("id")+"&classId="+gClassId;
			window.location.href=url;
		});
		
		//监听搜索按钮
		$("a#go").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key="+encodeURI(encodeURI($("input#key").val()))+"&price=all&classId=all";
			window.location.href=url;
		});
		
		//监听关键词按钮
		$("#keyWord").click(function(){
			var url = "menu.jsp?sellerId="+sellerId+"&key=all&price="+$("#price a").attr("id")+"&classId="+$("#class a").attr("id");
			window.location.href=url;
		});
		
		//改变按钮背景
		$("#class a#"+gClassId).addClass("c");
		$("#class a#"+gClassId).siblings().removeClass("c");//同级元素去掉"c"样式
		$("#price a#"+gPrice).addClass("c");
		$("#price a#"+gPrice).siblings().removeClass("c");//同级元素去掉"c"样式

	});
	
	//购买商品按钮
	function readyBuy(goodsId){
		var userName = $("#userName").html().trim();
		buy(userName,goodsId);
	};
	
	//收藏商品按钮
	function readyCollect(goodsId){
		var userName = $("#userName").html().trim();
		collect(userName,goodsId);
	};
</script>

</html>
